<template>
  <div class="main">
    <div class="top">
      <div class="title">
        <!-- <div class="back-icon thumb" title="返回" @click="back">
          <img v-lazy="publicUrl(`/images/back.png`)" />
        </div> -->
        {{ title }}
      </div>
      <div class="top-class-name">
        <div class="part left">
          {{ left.className }}<span class="under">一</span>
        </div>
        <div class="part right">
          {{ right.className }}<span class="under">一</span>
        </div>
      </div>
      <div class="under-line"></div>
    </div>
    <div class="content">
      <div class="content-part">
        <div
          class="tag thumb overOne"
          v-for="item in leftTag"
          :title="item.title"
          @click="() => jump(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="content-part">
        <div
          class="tag thumb overOne"
          v-for="item in rightTag"
          :title="item.title"
          @click="() => jump(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="mtm">
import { publicUrl } from "@/utils/util";
import { computed } from "vue";
import { useRouter } from "vue-router";

interface tagListItem {
  title: string;
  tag_id: number;
}

interface PropsData {
  className: string;

  tagList: Array<tagListItem>;
}

interface Props {
  left?: PropsData;
  right?: PropsData;
  title?: string;
  type: "mtm" | "spot" | "fabric";
  showNumber?: number;
}

const router = useRouter();

const props = withDefaults(defineProps<Props>(), {
  left: () => {
    return {
      className: "暂无",
      tagList: [],
    };
  },
  right: () => {
    return {
      className: "暂无",
      tagList: [],
    };
  },
  title: "",
  type: "mtm",
  showNumber: 24,
});
// const emits = defineEmits<(event: "back") => void>();

const leftTag = computed(() => {
  return props.left.tagList.filter((item, index) => {
    if (index >= props.showNumber - 1) return false;
    return item;
  });
});
const rightTag = computed(() => {
  return props.right.tagList.filter((item, index) => {
    if (index >= props.showNumber - 1) return false;
    return item;
  });
});

const jump = (item: tagListItem) => {
  switch (props.type) {
    case "spot":
      router.push({ path: "/mtm/spot/index/spotDetail" });
      return;
    case "fabric":
      router.push({ path: "/mtm/fabric/index/fabricDetail" });
      return;
    case "mtm":
    default:
      router.push({ path: "/mtm/index/make" });
      return;
  }
};

// const back = () => emits("back");
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
